<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>放大镜效果</title>
		<script src="jquery-1.7.2.js"></script>
		<script>
			$(function(){
				var sX=0,xY=0;
				// 当鼠标在.sb中移动的事件
				$('.sb').mousemove(function(e){
					// 把鼠标坐标点存到变量
					console.dir(e.position);
					sX=e.offsetX;
					sY=e.offsetY;
					// 鼠标移动时 获取鼠标的坐标值*2取反赋值给.xs作为backgroundPosition值
					$('.xs').css({
						display:'block',
						backgroundPositionX:'-'+e.offsetX*2+'px',
						backgroundPositionY:'-'+e.offsetY*2+'px',
					});
					// 鼠标移动的时候 取鼠标的坐标值计算后赋值给鼠标块的left和top值
					$('.sbx').css({
						left:sX-50+'px',
						top:sY-20+'px',
					});
					console.log((e.offsetX)+'======'+(e.offsetY));
				});

				// 鼠标出去的时候 设置.xs不显示
				$('.sb').mouseout(function(){
					$(this).next().css('display','none');
				});
			});
		</script>
		<style>
			/*对元素设置基本样式*/
			*{margin:0;padding:0;list-style:none;}
			div{width: 820px; height:300px;  }
			div>div{width: 400px; height: 300px;}
			.sb{
				
				background:url(./image/img.png);
				background-size:contain;
				position: relative;
			} 
			/*.xs{
				display:none;
				float:right;
				background:green;
				background:url(./image/img.png) no-repeat;
			}*/
			/*设置鼠标的块的样式*/
			.sbx{
				width: 80px;
				height: 60px;
				background:#000;
				opacity:0.5;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="sb">
				<!-- 鼠标样式 -->
				<div class="sbx"></div>
			</div>
			<div class="xs"></div>
		

		</div>


		<div class="test1" style="margin:10px;width:100px;height:100px;background:red;position:absolute">
			<div class="test2"  id="test2" style="width:100px;height:100px;background:red;position:absolute;top:20px;left:20px">
			
		</div>
		</div>
		<script type="text/javascript">
			var test2 = document.getElementById('test2');
			test2.onclick = function(e){
					console.log(e.offsetX);

			}
		</script>
		<script type="text/javascript">
			var a = 0;
			while(a !== 99){
			a = parseInt(Math.random()*91+9);
			console.log(a)
		}
		</script>
	</body>
</html>